<template>
	<view class="box" :style="{height: wh + 'px'}">
		<!-- 返回和分享 -->
		<view class="navbar">
			<!-- 返回上一页 -->
			<view class="home left" @click="goBack">
				<van-icon name="arrow-left" />
			</view>
			<!-- 分享 -->
			<view class="home right" @click="showShare = true">
				<van-icon name="share-o" />
			</view>
			<!-- 分享面板 -->
			<van-share-sheet @select="onSelect" v-model:show="showShare" title="立即分享给好友" :options="options" />
		</view>
		<!-- 商品详情图 -->
		<swiper indicator-active-color="#1DB0FC" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000" :circular="true">
			<swiper-item v-for="item in images" :key="item.id">
				<view class="swiper-item">
					<image :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="goods-info">
			<!-- 价格 -->
			<view class="goods-price">￥{{goods.goods_price}}起</view>
			<!-- 退费详情 -->
			<view class="goods-tuifei">退货包运费 | 不满意包退货运费，退款无忧</view>
			<!-- 名称 -->
			<view class="goods-name">{{goods.goods_name}}</view>
			<!-- 库存信息 -->
			<view class="goods-label">
				<!-- 库存 -->
				<view class="goods-stock">库存：{{goods.goods_stock}}件</view>
				<!-- 销量 -->
				<view class="goods-sales">销售：{{goods.goods_sales}}件</view>
			</view>
			<!-- 包邮信息 -->
			<view class="goods-free">退货包运费 · 全场包邮 · 7天无理由退货</view>
		</view>
		<!-- 商品用户评论 -->
		<view class="user-comment">
			<view class="title">
				<view class="">用户评价(4)</view>
				<view class="praise">
					<text class="font-num">100%</text>好评率
					<van-icon name="arrow" />
				</view>
			</view>
			<view class="evaluateWtapper">
				<view class="evaluateItem">
					<!-- 用户评论信息 -->
					<view class="pic-text">
						<!-- 头像 -->
						<view class="pictrue">
							<image :src="goodsImages[2]"></image>
						</view>
						<!-- 昵称 -->
						<view class="uname">可乐哥哥</view>
						<!-- 评论等级 -->
						<van-rate color="#ffd21e" v-model="value" :size="13" readonly />
					</view>
					<!-- 评论内容 -->
					<view class="comment-text">
						整体非常可爱，颜色非常好看，也是很好吃，虽然很酸，但是总体不错。
					</view>
					<!-- 评论图片展示 -->
					<view class="comment-img">
						<view class="imgList">
							<image :src="goodsImages[0]">
							</image>
						</view>
						<view class="imgList">
							<image :src="goodsImages[1]">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品展示 -->
		<view class="goods-show">
			<view class="title">商品展示</view>
			<view class="show-img">
				<view class="show-img-item" v-for="(item, index) in shows" :key="index">
					<image :src="item"></image>
				</view>
			</view>
		</view>
		<!-- 商品款式 -->
		<van-popup v-model:show="show" position="bottom" :style="{ padding: '64px' }">
			<view class="product-window on">
				<!-- 商品信息 -->
				<view class="acea-row">
					<!-- 商品图片 -->
					<view class="pictrue">
						<image :src="images[0]"></image>
					</view>
					<!-- 商品接绍 -->
					<view class="text">
						<view class="title">{{goods.goods_name}}</view>
						<view class="money font-color">
							<text class="num">￥{{goods.goods_price}}</text>
						</view>
						<view class="stock">销量：{{goods.goods_sales}}</view>
					</view>
					<van-icon @click="show=false" name="cross" />
				</view>
				<!-- 商品款式 -->
				<view class="rollTop">
					<view class="productWinList">
						<view class="item">
							<view class="title">款式</view>
							<view class="listn acea-row row-middle">
								<view @click="goods_active=i" :class="['itemn', i == goods_active ? 'on': '']"
									v-for=" (item, i) in style" :key="item.id">{{item}}
								</view>
							</view>
						</view>
					</view>
					<!-- 数量 -->
					<view class="cart acea-row row-between-wrapper">
						<view class="title">数量</view>
						<van-stepper v-model="goods_num" />
					</view>
				</view>
				<view class="buy-btn">
					<van-button @click="addOrder" block color="linear-gradient(to right, #ff6034, #ee0a24)">
						立即购买
					</van-button>
				</view>
			</view>
		</van-popup>
		<!-- 商品操作 -->
		<view class="footer">
			<van-action-bar>
				<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="onClickKeFu" />
				<van-action-bar-icon icon="cart-o" :badge="cartList.length" text="购物车" @click="onClickShop"
					color="#ff5000" />
				<van-action-bar-icon v-if="is_collect" icon="star" text="已收藏" color="#ff5000"
					@click="onClickShouCang(goods.goods_id)" />
				<van-action-bar-icon v-if="is_collect == false" icon="star-o" text="收藏" color="#ff5000"
					@click="onClickShouCang(goods.goods_id)" />
				<van-action-bar-button type="warning" text="加入购物车" @click="onClickGouWuChe(goods.goods_id)" />
				<van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
			</van-action-bar>
		</view>
	</view>
</template>

<script>
	// 导入api
	import {
		closeDialog
	} from "vant";
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				goods: "", // 商品信息
				goodsImages: "", // 商品详情图
				goodsStyle: "", // 商品款式
				goodsShows: '', // 商品展示图
				collectList: "", // 收藏的商品列表
				cartList: "", // 购物车列表
				// 当前可用的高度
				wh: 0,
				goods_active: 0, // 商品选项
				show: false, // 弹出商品款式
				showShare: false, // 分享面板
				options: [], // 分享模板内容
				value: 3, // 商品评论等级
				goods_num: 1, // 商品数量
				is_collect: false, // 商品是否收藏
			}
		},
		methods: {
			onClickShop() {
				uni.switchTab({
					url: "/pages/cart/cart"
				});
			},
			goBack() {
				uni.switchTab({
					url: "/pages/home/home"
				});
			},
			// 分享按钮
			onSelect(option) {
				uni.$showMsg(option.name);
			},
			// 获取商品信息接口
			getGoods(query) {
				api.getGoodsDetail(query).then(res => {
					// 获取失败
					if (res.data.status != 200) uni.$showMsg(res.data.data.err);
					// 获取成功
					this.goods = res.data.data.data;
					// 商品详情图
					this.goodsImages = res.data.data.data.goods_images;
					// 商品款式
					this.goodsStyle = res.data.data.data.goods_styles;
					// 商品展示图
					this.goodsShows = res.data.data.data.goods_shows;
					uni.$showMsg(res.data.msg);
				})
			},
			// 收藏的商品列表
			getCollectGoods(query) {
				api.collectGoods().then(res => {
					// 获取失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						// 1.8秒跳转登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);
						return;
					}
					// 获取成功
					this.collectList = res.data.data;
					// 判断这个商品是否收藏
					const flag = res.data.data.collectList.some(item => item.goods_id == query.goods_id);
					// 赋值
					this.is_collect = flag;
				})
			},
			// 获取购物车列表
			getAllCart(query) {
				api.getCart().then(res => {
					// 获取失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						// 1.8秒跳转登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);
						return;
					}
					// 获取成功
					this.cartList = res.data.data.goodsCart;
				})
			},
			// 客服
			onClickKeFu() {
				uni.$showMsg("客服功能还在测试中...");
			},
			// 购物车
			onClickGouWuChe(goodsId) {
				// 加入购物车
				api.addCart(goodsId).then(res => {
					// 加入失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						return;
					}
					// 加入成功
					uni.$showMsg(res.data.msg);
					location.reload();
				})
			},
			// 收藏
			onClickShouCang(goodsId) {
				// 取消收藏
				if (this.is_collect) {
					api.qxGoods(goodsId).then(res => {
						// 收藏失败
						if (res.data.status != 200) {
							// 提示信息
							uni.$showMsg(res.data.data.err)
							// 1.8秒跳转登录页面
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/login/login",
								})
							}, 1800);
							return;
						}
						// 收藏成功
						uni.$showMsg(res.data.msg);
						location.reload();
					})
				} else {
					// 收藏
					api.scGoods(goodsId).then(res => {
						// 曲线失败
						if (res.data.status != 200) {
							// 提示信息
							uni.$showMsg(res.data.data.err)
							// 1.8秒跳转登录页面
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/login/login",
								})
							}, 1800);
							return;
						}
						// 取消成功
						uni.$showMsg(res.data.msg);
						location.reload();
					})
				}
			},
			// 点击立即购买
			onClickButton() {
				this.show = true;
			},
			addOrder() {
				const data = {};
				data.goods_id = this.goods.goods_id;
				data.goods_images = this.goods.goods_img;
				data.goods_name = this.goods.goods_name;
				data.goods_price = parseInt(this.goods.goods_price);
				data.goods_styles = this.goods.goods_styles[this.goods_active];
				data.num = parseInt(this.goods_num);
				api.order({
					total: 0,
					goodsList: JSON.stringify(data),
					status: 1,
				}).then(res => {
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err);
						if (res.data.data.err != "请添加收货地址") {
							// 1.8秒跳转登录页面
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/login/login",
								})
							}, 1800);
						}
					};
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/goods/good_order/good_order?key_id=" + res.data.data
								.key_id,
						})
					}, 1800);
				});
			}
		},
		computed: {
			// 过滤商品展示图
			shows() {
				const goods_shows = [];
				for (var i = 0; i < this.goodsShows.length; i++) {
					if (this.goods.goods_shows[i] == "") {
						continue;
					}
					goods_shows.push(this.goods.goods_shows[i]);
				}
				return goods_shows;
			},
			// 过滤商品详情图
			images() {
				const goods_images = [];
				for (var i = 0; i < this.goodsImages.length; i++) {
					if (this.goods.goods_images[i] == "") {
						continue;
					}
					goods_images.push(this.goods.goods_images[i]);
				}
				return goods_images;
			},
			// 过滤商品款式
			style() {
				const goods_styles = [];
				for (var i = 0; i < this.goodsStyle.length; i++) {
					if (this.goods.goods_styles[i] == "") {
						continue;
					}
					goods_styles.push(this.goods.goods_styles[i]);
				}
				return goods_styles;
			}
		},
		onLoad(option) {
			// 获取当前可用高度
			const sysInfo = uni.getSystemInfoSync();
			this.wh = sysInfo.windowHeight;
			uni.setNavigationBarTitle({
				title: "商品信息"
			});
			// 分享模板内容
			this.options = [
				[{
						name: '微信',
						icon: 'wechat'
					},
					{
						name: '朋友圈',
						icon: 'wechat-moments'
					},
					{
						name: '微博',
						icon: 'weibo'
					},
					{
						name: 'QQ',
						icon: 'qq'
					},
				],
				[{
						name: '复制链接',
						icon: 'link'
					},
					{
						name: '分享海报',
						icon: 'poster'
					},
					{
						name: '二维码',
						icon: 'qrcode'
					},
					{
						name: '小程序码',
						icon: 'weapp-qrcode'
					},
				],
			];
			// 获取商品信息接口
			this.getGoods(option);
			// 获取收藏的商品
			this.getCollectGoods(option);
			// 获取购物车列表
			this.getAllCart(option);
		}
	}
</script>

<style>
	/* 返回和分享 */
	.navbar {
		height: 110rpx;
		position: fixed;
		z-index: 99;
		width: 100%;
		display: flex;
		align-items: center;
	}

	/* 返回上一页 */
	.navbar .home {
		color: #333;
		position: fixed;
		width: 29px;
		height: 29px;
		z-index: 99;
		background-color: #fff;
		/* background: hsla(0, 0%, 100%, .3); */
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 21px;
		font-size: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left {
		left: 40rpx;
	}

	.right {
		right: 40rpx;
	}

	/* 分享 */

	/* 商品详情图 */
	swiper {
		height: 700rpx;
	}

	.swiper-item {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		border-radius: 12px;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	/* 商品信息 */
	.goods-info {
		background-color: white;
	}

	/* 价格 */
	.goods-info .goods-price {
		margin: 0 16px;
		padding-top: 13px;
		font-size: 25px;
		font-weight: 700;
		color: #FD502F;
	}

	/* 名称 */
	.goods-info .goods-name {
		font-size: 15px;
		font-weight: 700;
		margin: 12rpx 16px 0 16px;
		word-break: break-all;
	}

	/* 退费详情 */
	.goods-info .goods-tuifei {
		background-color: #ECF8EC;
		margin: 12rpx 16px 0 16px;
		font-size: 15px;
		color: #21B40D;
		padding: 10rpx 13px;
		border-radius: 7px;
	}

	.goods-info .goods-label {
		margin: 0 16px;
		font-size: 12px;
		padding-bottom: 12rpx;
		color: #82848f;
		margin-top: 11px;
		display: flex;
		justify-content: space-between;
	}

	.goods-info .goods-free {
		border-top: 1px solid #f2f2f2;
		margin: 12rpx 16px 0 16px;
		font-size: 13px;
		padding: 20rpx 0;
		border-radius: 7px;
		color: #82848f;
	}

	/* 商品用户评论 */
	.user-comment {
		margin-top: 10px;
		background-color: #fff;
	}

	.user-comment .title {
		height: 45px;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		color: #282828;
		margin-left: 16px;
		padding-right: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user-comment .title .praise {
		font-size: 14px;
		color: grey;
	}

	.font-num {
		color: rgba(29, 176, 252, 1);
	}

	.user-comment .evaluateWtapper .evaluateItem {
		background-color: #fff;
		padding-bottom: 13px;
	}

	/* 评论信息 */
	.pic-text {
		font-size: 13px;
		color: #282828;
		height: 50px;
		padding: 0 16px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	/* 头像 */
	.pic-text .pictrue {
		width: 32px;
		height: 32px;
		margin-right: 10px;
		border-radius: 50%;
	}

	.pic-text .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	/* 昵称 */
	.pic-text .uname {
		margin-right: 8px;
	}

	/* 评论内容 */
	.comment-text {
		font-size: 14px;
		color: #282828;
		padding: 0 16px;
	}

	/* 评论图片展示 */
	.comment-img {
		padding: 0 16px 0 8px;
		margin-top: 13px;
		display: flex;
		flex-wrap: wrap;
	}

	.comment-img .imgList {
		width: 83px;
		height: 83px;
		margin: 0 0 8px 8px;
	}

	.comment-img .imgList image {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	/* 商品展示 */
	.goods-show {
		position: relative;
		margin-top: 10px;
		width: 100%;
		padding-bottom: 53px;
		overflow: hidden;
	}

	.goods-show .title {
		font-size: 16px;
		color: #333;
		height: 45px;
		width: 100%;
		background-color: #fff;
		text-align: center;
		line-height: 45px;
	}

	/* 图片 */
	.show-img {
		width: 100%;
		height: 100%;
	}

	.show-img .show-img-item {
		width: 100%;
		height: 850rpx;
	}

	.show-img .show-img-item image {
		display: block;
		width: 100%;
		height: 850rpx;
	}

	/* 商品操作 */
	.footer {
		padding: 0 10px 0 16px;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: hsla(0, 0%, 100%, .85);
		backdrop-filter: blur(10px);
		/* z-index: 277; */
		border: 1px solid #f0f0f0;
		height: calc(53px + env(safe-area-inset-bottom));
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	/* 商品款式 */
	.product-window {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		z-index: 100;
		border-radius: 8px 8px 0 0;
		/* padding-bottom: calc(73px + env(safe-area-inset-bottom)); */
	}

	/* 商品信息 */
	.acea-row {
		padding: 0 68px 0 15px;
		margin-top: 15px;
		position: relative;
		display: flex;
	}

	/* 商品图片 */
	.acea-row .pictrue {
		width: 78px;
		height: 78px;
	}

	.acea-row .pictrue image {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 5px;
	}

	/* 商品接绍 */
	.acea-row .text {
		margin-left: 30rpx;
		width: 420rpx;
		font-size: 16px;
		color: #202020;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.acea-row .text .title {
		margin-left: 8rpx;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.acea-row .text .money {
		font-size: 12px;
	}

	.acea-row .text .money .num {
		font-size: 18px;
		color: #FD502F;
	}

	.acea-row .text .stock {
		color: #999;
		margin-left: 3px;
		margin-right: 10px;
		font-size: 12px;
	}

	.acea-row .van-icon {
		position: absolute;
		right: 15px;
		font-size: 18px;
		color: #8a8a8a;
	}

	/* 商品款式 */
	.rollTop {
		max-height: 262px;
		overflow: auto;
		margin-top: 18px;
	}

	.rollTop .productWinList .item .title {
		font-size: 15px;
		color: #999;
		padding: 0 15px;
	}

	.listn {
		padding: 0 15px 0 8px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.rollTop .productWinList .item .listn .itemn {
		border: 1px solid #f2f2f2;
		font-size: 13px;
		color: #282828;
		padding: 3px 17px;
		border-radius: 13px;
		margin: 10px 0 0 7px;
		background-color: #f2f2f2;
	}

	.rollTop .productWinList .item .listn .on {
		color: rgba(29, 176, 252, 1);
		background-color: rgba(9, 139, 243, 0.1);
		border-color: rgba(29, 176, 252, 1);
	}

	/* 数量 */
	.rollTop .cart {
		display: flex;
		margin-top: 18px;
		padding: 0 15px;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.rollTop .cart .title {
		font-size: 15px;
		color: #999;
	}

	/* 立即购买 */
	.buy-btn {
		margin: 30rpx auto;
		width: 80%;
		height: 80rpx;
	}
</style>